<template>
  <div>
    <h3>搜索 {{ keywords }}</h3>
    <div class="tab">
      <Tab :tabList="tabList"></Tab>
    </div>
    <div class="mian">
      <keep-alive include="SongRes">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>
  
<script>
import Tab from "@/components/Tab";
export default {
  data() {
    return {
      tabList: [
        {
          path: "/search/song",
          name: "songRes",
          label: "单曲",
        },
        {
          path: "/search/singer",
          name: "singerRes",
          label: "歌手",
        },
        {
          path: "/search/video",
          name: "videoRes",
          label: "视频",
        },
        {
          path: "/search/album",
          name: "albumRes",
          label: "专辑",
        },
        {
          path: "/search/sheet",
          name: "sheetRes",
          label: "歌单",
        },
      ],
    };
  },
  components: {
    Tab,
  },
  computed: {
    keywords() {
      return this.$store.state.search.searchWord;
    },
  },
};
</script>

<style>
h3 {
  margin: 15px auto 15px 25px;
}
</style>